<template>
  <el-row>
    <el-col :span="24">
      <div :class="currentClickOption=='createTask'?'item active':'item'" @click="emitNavClick('createTask')">
        <el-tooltip effect="dark" content="壹深圳直播" placement="right">
          <i class="el-icon-video-play"></i>
        </el-tooltip>
      </div>
      <div @click="emitNavClick('fiveLive')" :class="currentClickOption=='fiveLive'?'item active':'item'">
        <el-tooltip effect="dark" content="5G直播" placement="right">
          <i class="el-icon-video-camera"></i>
        </el-tooltip>
      </div>
      <div @click="emitNavClick('muduLive')" :class="currentClickOption=='muduLive'?'item active':'item'">
        <el-tooltip effect="dark" content="目睹直播" placement="right">
          <i class="el-icon-s-platform"></i>
        </el-tooltip>
      </div>
      <div :class="currentClickOption=='taskLists'?'item active':'item'"  @click="emitNavClick('taskLists')">
        <el-tooltip effect="dark" content="任务列表" placement="right">
          <i class="el-icon-s-operation"></i>
        </el-tooltip>
      </div>
      <div :class="currentClickOption=='userLists'?'item active':'item'"  @click="emitNavClick('userLists')">
        <el-tooltip effect="dark" content="用户库" placement="right">
          <i class="el-icon-bangzhu"></i>
        </el-tooltip>
      </div>
      <div  @click="emitNavClick('aboutSoft')" class="item">
        <el-tooltip effect="dark" content="更多" placement="right">
          <i class="el-icon-menu" />
        </el-tooltip>
      </div>
    </el-col>
  </el-row>

</template>

<script>
export default {
  name: "NavBar",
  data(){
    return {
      currentClickOption:'createTask'
    }
  },
  methods:{
    emitNavClick(option){
      this.currentClickOption = option
      this.$emit('emitNavClick',{op:option})
    }
  }
}
</script>

<style scoped>
.el-row{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  align-content: center;
}
.el-row .el-col{
  height: 350px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  align-content: center;
}
.el-row .el-col .item{
  width: 50px;
  height: 50px;
  border-radius: 50%;

  font-size: 30px;
  color: #909399;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  align-content: center;
}
.el-row .el-col .item:hover{
  color: #2c8af8;
}
.el-row .el-col .item.active{
  color: #2c8af8;

}
</style>
